﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Sewise Player</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	var srcPath = "../player/sewise.player.min.js?server=vod&type=mp4&videourl=http://jackzhang1204.github.io/materials/mov_bbb.mp4&sourceid=&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=VodVideo&buffer=5&skin=vodWhite";
	var fallbackurls = {
		ogg: "http://www.w3schools.com/html/mov_bbb.ogg",
		webm: "http://www.w3schools.com/html/mov_bbb.webm"
	}
	var state = "removed";
	function addPlayer(){
		if(state == "removed"){
			var script = document.createElement('script');
			script.type = "text/javascript";
			script.src = srcPath + "&fallbackurls=" + encodeURIComponent(JSON.stringify(fallbackurls, "", "\t"));
			//$("#container").append(script);
			//用JQ的append方法动态添加脚本会造成脚本被执行两次，所以这里改为原生动态添加脚本的方式。
			$("#container").get(0).appendChild(script);
			state = "added";
		}
	}
	function removePlayer(){
		if(window.SewisePlayer){
			SewisePlayer.doStop();
		}
		if(state == "added"){
			$("#container").empty();
			state = "removed";
		}
	}
</script>
</head>
<body>
	<div>
		<div id="container" style="width: 640px; height: 352px; border: solid 1px #DDD"></div>
		<div>
		<div style="padding: 10px;">
			<button onclick="addPlayer()">Add Player</button>
			<button onclick="removePlayer()">Remove Player</button>
		</div>
		</div>
		<div style="padding: 20px;float: left;">注：请在Web环境下预览该文件。</div>
	</div>
	<div style="float: left; width: 100%; padding: 10px 30px; "><a href="https://github.com/jackzhang1204/sewise-player" target="_blank">Fork it on GitHub</a></div>
</body>
</html>